<template>
	<view class="more">
		<view class="top">
			<image src="../../../../static/image/more.png" mode="widthFix"></image>
		</view>
		<view v-if="magicBoxInfo.list.length">
			<view class="magic-bags">
				<magicBag class="magic-item" v-for="(item,index) in magicBoxInfo.list" :key="index" :value="item"
					@handleClick="goDetail(item)">
				</magicBag>
				<ns-loading :isRotate="true" v-if="magicBoxInfo.loading"></ns-loading>
				<view class="load-finish" v-if="magicBoxInfo.finish">亲，已经到底了哦~</view>
			</view>
		</view>
		<view class="empty-wrapper flex justify-center align-center flex-column" v-else>
			<text class="empty-icon"></text>
			<text class="empty-text">这里什么都没有哦~</text>
		</view>
	</view>
</template>

<script>
	import magicBag from "@/components/magic-box/magic-bag/index.vue";
	export default {
		props: {
			magicBoxInfo: {
				type: Object,
				default () {
					return {
						params: {
							page: 0,
							page_num: 5,
							display: []
						},
						list: [],
						finish: false,
						loading: false,
					}
				}
			}
		},
		components: {
			magicBag
		},
		methods: {
			// debounceHandle(item){
			// 	return this.$util.debounce(this.goDetail.bind(this,item), 1000, false)
			// },
			// 去盲盒详情
			goDetail(item) {
				this.$emit('goDetail',{id:item.id});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.more {
		background: #E9EBF9;
		padding: 0 24rpx;

		.top {
			display: flex;
			justify-content: center;
			padding: 37rpx 0 27rpx 0;
			box-sizing: border-box;

			&>image {
				width: 360rpx;
				height: 25rpx;
			}
		}

		.magic-item {
			margin-bottom: 15rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>
